<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>说说</title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/hiconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/mescroll.min.css" />
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.bomBtn {
				height: 30px;
			}
			
			.bomBtn div {
				width: 100%;
			}
			
			.bomBtn div:first-child {
				border-right: 1px solid #DDDDDD;
			}
			/*学校选择*/
			
			.checkBox {
				text-align: center;
				width: 40%;
				position: fixed;
				top: 44px;
				left: 30%;
				background-color: #29AECD;
				color: white;
				z-index: 999;
			}
			
			.checkBox li {
				font-size: 14px;
				padding: 4px 0;
				border-bottom: 1px solid white;
			}
			
			.mui-backdrop {
				bottom: -51px;
			}
			
			.mui-popover .mui-table-view {
				background-color: #29AECD;
			}
			
			.mui-pull-top-pocket.mui-block.mui-visibility {
				background-color: white;
			}
			/*去掉圆角*/
			
			.mui-popover .mui-table-view .mui-table-view-cell:last-child,
			.mui-popover .mui-table-view .mui-table-view-cell:last-child {
				border-radius: 0;
			}
		</style>
	</head>

	<body>
		<div id="sayPage">
			<header class="mui-bar mui-bar-nav">
				<!--@tap="checkSchool"-->
				<h1 class="mui-title">
					 <a @tap="hideTab" href="#popover">我的学校  
						<i v-if="maskShow" class="mui-icon mui-icon-arrowup"></i>
						<i v-else class="mui-icon mui-icon-arrowdown"></i>
					 </a>
				</h1>
				<a class="mui-pull-right mui-icon mui-icon-compose whiteColor"></a>

			</header>
			<div id="popover" class="mui-popover">
				<ul class="mui-table-view checkBox">
					<li class="mui-table-view-cell" @tap="getSchoolData('my')">我的学校</li>
					<li class="mui-table-view-cell" @tap="getSchoolData('all')">所有学校</li>
				</ul>
			</div>
			<div id="mescroll" class="mui-content mescroll">

				<ul class="mui-table-view" id="dataList">
					<li class="mui-table-view-cell mui-media">
						<img class="mui-media-object mui-pull-left" src="../images/hong_favicon.ico">
						<div class="mui-media-body">
							<span class="userColor titleSize30">用户名字 <span class="ordinarySize24 ordinaryColor mui-pull-right">10秒前</span></span>
							<p class='mui-ellipsis'>
								<i class="icon-paotui hIconfont smallTitleSize28"></i>
								<span class="ordinarySize24 ordinaryColor">清华大学 </span>
							</p>
							<div class="titleColor titleSize30" style="margin-top: 8px;">测试单</div>
						</div>
					</li>
					<li class="mui-table-view-cell hya-flex ordinaryColor bomBtn mui-text-center ordinarySize24">
						<div>0条评论</div>
						<div>0人关注</div>
					</li>
				</ul>

			</div>
		</div>

		<script type="text/javascript">
			mui.init({
				swipeBack: false, //启用右滑关闭功能
			});
			var say_data = new Vue({
				el: "#sayPage",
				data: function() {
					return {
						maskShow: false,
						mescroll: null,
						data: [],
						maskLength: 0
					}
				},
				mounted: function() {
					//判断现在有没有遮罩
					var that = this;

					//创建MeScroll对象,down可以不用配置,因为内部已默认开启下拉刷新,重置列表数据为第一页
					//解析: 下拉回调默认调用mescroll.resetUpScroll(); 而resetUpScroll会将page.num=1,再执行up.callback,从而实现刷新列表数据为第一页;
					var self = this;
					self.mescroll = new MeScroll("mescroll", { //请至少在vue的mounted生命周期初始化mescroll,以确保您配置的id能够被找到
						up: {
							callback: self.upCallback, //上拉回调
							//以下参数可删除,不配置
							isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
							//page:{size:8}, //可配置每页8条数据,默认10
							toTop: { //配置回到顶部按钮
								src: "../images/hong_favicon.ico", //默认滚动到1000px显示,可配置offset修改
								//html: null, //html标签内容,默认null; 如果同时设置了src,则优先取src
								offset: 10
							}
						}
					});

				},
				created: function() {
					this.$nextTick(function() {
						var that = this;

					})
				},

				methods: {
					//上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
					upCallback: function(page) {
						//联网加载数据
						var self = this;
						getListDataFromNet(page.num, page.size, function(curPageData) {

							//更新列表数据
							self.data = self.data.concat(curPageData);

							//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
							//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
							self.mescroll.endSuccess(curPageData.length);

						}, function() {
							//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
							self.mescroll.endErr();
						});
					},
					//底部隐藏
					hideTab: function(e) {
						this.maskShow = true;
						var that = this;
						alert(111)
						setTimeout(function() {
							mui('.mui-backdrop.mui-active')[0].addEventListener('tap', function() {
								that.maskShow = false;
								mui.fire(plus.webview.getWebviewById(localStorage.getItem('appID')), 'closeMask', {});
							})
						},300)
						mui.fire(plus.webview.getWebviewById(localStorage.getItem('appID')), 'openMask', {});
					},
					getSchoolData: function(e) {
						if(e == 'my') { //我的学校
							this.getData();
							return;
						}
						if(e == 'all') {
							//所有学校
							this.getData();
							return;
						}
					},
					getData: function(e) {
						var that = this;
						plus.nativeUI.showWaiting();
						setTimeout(function() {
							that.maskShow = false;
							plus.nativeUI.closeWaiting();
							mui('.mui-popover').popover('toggle');
							mui.fire(plus.webview.getWebviewById(localStorage.getItem('appID')), 'closeMask', {});
						}, 1000)
					}
				}
			})

			function getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) {
				//延时一秒,模拟联网
				setTimeout(function() {
					//          	axios.get("xxxxxx", {
					//					params: {
					//						num: pageNum, //页码
					//						size: pageSize //每页长度
					//					}
					//				})
					//				.then(function(response) {
					var data = []; // 模拟数据: ../res/pdlist1.js
					var listData = []; //模拟分页数据
					for(var i = (pageNum - 1) * pageSize; i < pageNum * pageSize; i++) {
						if(i == data.length) break;
						listData.push(data[i]);
					}
					successCallback && successCallback(listData); //成功回调
					//				})
					//				.catch(function(error) {
					//					errorCallback&&errorCallback()//失败回调
					//				});
				}, 500)
			}
		</script>
	</body>

</html>